// 引入axios
import axios from 'axios'

// vuex 的使用步骤;
// 01: 下载引入, 下载时需要指定版本 vue2.x => vuex3.x ;  vue3.x =>vuex4.x
import Vue from 'vue';
import Vuex from 'vuex'
Vue.use(Vuex)

// console.log(11, Vuex);

// 导入user模块
import user from './modules/user'
import shop from './modules/shop'

// 引入vuex 数据持久化的插件 vuex-persistedstate
import createpersistedstate from 'vuex-persistedstate'
// console.log(11, createpersistedstate);

// 02: 创建store 实例对象
const store = new Vuex.Store({
    state: { // 定义全局的数据,这样每个组件都能访问和修改state 中的数据
        count: 0
    },
    mutations: { // mutation 存放所有的同步修改state 的方法,不能存放异步方法,并且只能通过mutation 来修改state
        add(state) {
            state.count++
        },
        addStep(state, step) {
            state.count += step
        }
    },
    actions: { // actions 存放所有的异步方法,actions中的方法不能直接修改state,需要调用mutations 中的同步方法
        addAsync(context) {
            // 调用了同步方法
            setTimeout(() => {
                context.commit('add')
            }, 1000)
        },
        addStepAsync(context, step) {
            // context 为上下文对象
            setTimeout(() => {
                context.commit('addStep', step)
            }, 1000);
            // axios.get('https://www.fastmock.site/mock/8b4ab5d13c641370078f59fa4baf9e89/api/random').then(res => {
            //     console.log(res);
            //     context.commit('addStep', res.data.data)
            // })
        }
    },
    getters: { // 相当于store 中的计算属性,对state中的数据进行加工处理,然后创建一个新的数据
        doubleCount(state) {
            return state.count * 2
        }
    },
    modules: {
        user: user, // 模块名: 对象
        shop: shop

    },
    plugins: [
        // createpersistedstate(); // 直接调用,将state中的所有数据 存放在了localstorage
        // createpersistedstate({ // 这种方式,将state 数据存储在了 sessionstorage 中
        //     storage: window.sessionStorage
        // });

        createpersistedstate({ // 这种方式,指定state 中那个数据需要做持久化存储
            storage: window.sessionStorage,
            reducer(val) {
                console.log(3, val);
                return {
                    // count: val.count
                    user: val.user
                }
            }
        })

    ]
})

// 03: 将store 对象挂载绑定到根实例上,这样每一个组件都能访问该store中的数据了

//导出 store 
export default store